<template>
  <div>
    <el-page-header content="产品详情" @back="goBack">
    </el-page-header>
    <!-- 主页表格 -->
    <el-table
      :data="admins"
      style="width: 100%"
      :row-class-name="tableRowClassName">
      <el-table-column
        prop="a_id"
        label="管理员编号"
        width="80">
      </el-table-column>
      <el-table-column
        prop="a_name"
        label="管理员名字"
        width="100">
      </el-table-column>
      <!-- <el-table-column
        prop="a_status"
        label="管理员状态"
        width="100">
      </el-table-column> -->
      <el-table-column
        prop="r_nickname"
        label="角色昵称"
        width="100">
      </el-table-column>
      <el-table-column
        label="操作"
        width="150">
        <template slot-scope="scope">
          <el-button @click="handleClick(scope.row)" type="primary" size="small">修改管理员角色</el-button>
        </template>
      </el-table-column>
    </el-table>
    <div class="block">
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="currentPage"
        :page-sizes="[3, 5, 10, 20]"
        :page-size="pagesize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total">
      </el-pagination>
    </div>
    <!-- 修改 -->
    <el-select v-model="roleId" slot="prepend" placeholder="请选择" v-show="rolemode">
      <el-option :label="r.r_nickname" :value="r.r_id" v-for="r in role" :key="r.r_id"></el-option>
    </el-select>
    <el-button @click="update" type="primary" size="small" v-show="rolemode">确认修改</el-button>
  </div>
</template>

<script>
export default {
  data(){
    return {
        admins:[],
        currentsize:1,
        pagesize:3,
        // 分页
        currentPage: 1,
        total:0,
        pagesize:3,
        role:[],
        roleId:'',
        rolemode:false,
        cid:0
    }
  },
  methods:{
    init(){
      // 加载角色
      this.$ajax({
        url:"after/role",
        method:"get",
        params:{currentsize:1,pagesize:50}
      }).then(resp=>{
        let energyobj = resp.data.message;
        energyobj.forEach((item,i)=>{
          if(item.r_state==0){
            energyobj.splice(i,1);
          }
        })
        this.role = energyobj
      })

      let obj = {
        currentsize:this.currentPage, 
        pagesize:this.pagesize
      }
      this.$ajax({
        url:"after/findRolemenu",
        method:"get",
        params:obj
      }).then(resp=>{
        if(resp.data.status === 1){
          let admin = resp.data.message
          this.total = resp.data.totalPage
          admin.forEach((item,i)=>{
            // item.a_status==1?item.a_status="正常":item.a_status="禁用"
            if(item.a_id==1){
              admin.splice(i,1);
            }
          })
          this.admins = admin;
        }
      })
    },
    // 数据表格
    tableRowClassName({row, rowIndex}) {
      if (rowIndex%2 === 1) {
        return 'warning-row';
      } else{
        return 'success-row';
      }
    },
    handleClick(row) {
      this.rolemode = true
      this.cid = row.a_id

      // this.$ajax({
      //   url:"after/admin",
      //   method:"delete",
      //   params:obj
      // }).then(resp=>{
      //   if(resp.data.status === 1){
      //     if(row.a_status=="正常"){
      //       this.$message.error('已禁用');
      //     }else{
      //       this.$message({
      //         message: '启用成功',
      //         type: 'success'
      //       });
      //     }
      //     this.init();
      //   }
      // })
    },
    update(){
      this.rolemode = false
      // console.log(this.cid,this.roleId);
      this.$ajax({
        url:'after/admin',
        method:'put',
        data:{id:this.cid, roleId:this.roleId}
      }).then(resp=>{
        this.$message({
          message: '启用成功',
          type: 'success'
        });
        this.init()
      })
    },
    // 分页
    handleSizeChange(val) {
      this.pagesize = val
      this.init();
      // console.log(`每页 ${val} 条`);
    },
    handleCurrentChange(val) {
      this.currentPage = val;
      this.init();
      // console.log(`当前页: ${val}`);
    },
    goBack() {
      this.$router.push("/")
    }
  },
  created(){
    this.init();
  }
}
</script>

<style scoped>
/* 数据表格 */
.el-table .warning-row {
    background: oldlace;
  }
.el-table .success-row {
  background: #f0f9eb;
}
</style>